<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>emplist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content"> 
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20 
							<br />
							<a href="javascript:;" @click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="/ems_vue/emplist.html">main</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						Welcome {{ user.realname }}!
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								ID
							</td>
							<td>
								Name
							</td>
							<td>
								Photo
							</td>
							<td>
								Salary
							</td>
							<td>
								Age
							</td>
							<td>
								Operation
							</td>
						</tr>
						<tr :class="index%2==0?'row1':'row2'" v-for="(emp,index) in emps" :key="emp.id">
							<td>
								{{emp.id}}
							</td>
							<td>
								{{emp.name}}
							</td>
							<td>
								<img :src="'/ems_vue/'+emp.path" style="height: 40px;">
							</td>
							<td>
								{{emp.salary}}
							</td>
							<td>
								{{emp.age}}
							</td>
							<td>
								<a href="javascript:;" @click="delEmp(emp.id)">delete emp</a>&nbsp;<a :href="'/ems_vue/updateEmp.html?id='+emp.id">update emp</a>
							</td>
						</tr>
					</table>
					<p>
						<input type="button" class="button" value="Add Employee" onclick="location='addEmp.html'"/>
					</p>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
				ABC@126.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="/ems_vue/js/vue.js"></script>
<script src="/ems_vue/js/axios.min.js"></script>
<script>
    var app=new Vue({
        el: "#wrap",
        data:{
            user:{},
			emps:[]
        },
        methods:{
            logout(){
                localStorage.removeItem("user");
                location.reload(true);
			},
			delEmp(id){
                if(window.confirm("确定要删除这条员工信息吗？")) {
                    var _this = this;
                    axios.get("http://localhost:8989/ems_vue/emp/delete?id=" + id).then(res => {
                        if (res.data.state) {
                            alert(res.data.msg);
                            _this.findAll();//重新加载数据
                        } else {
                            alert(res.data.msg);
                        }

                    })
                }

			},
			findAll(){
                var _this=this;
                axios.get("http://localhost:8989/ems_vue/emp/findAll").then(res=>{
                    _this.emps=res.data;
                })
			}
        },
		created(){
            var userString = localStorage.getItem("user");
            if(userString){
                this.user=JSON.parse(userString);
			}else {
                alert("您尚未登录，请先登录！！");
                location.href="/ems_vue/login.html";
			}

			this.findAll();

        }
    });
</script>